<style scoped>
.autocompletebox {
  position: relative;
  display: inline-block;
  width: 100%;
}

.autocompletebox input.in {
  display: inline-block;
  width: 100%;
  padding: 0 12px;
  line-height: 26px;
  box-sizing: border-box;
  border-radius: 0px;
  border: solid 1px rgb(220, 223, 230);
  color: #606266;
}

.autocompletebox .autocomplete-list {
  position: absolute;
  top: 38px;
  left: 0px;
  background: #fff;
  width: 220px;
  border: solid 1px #efefef;
  box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.075), 0 0 3px rgba(179, 177, 177, 0.34);;
  
  min-height: 32px;
  z-index: 997;
  max-height: 390px;
  overflow: auto;
}

.autocompletebox .autocomplete-list ul {
  margin: 0 !important;
  padding: 0 !important;
}

.autocompletebox .autocomplete-list ul li {
  list-style: none;
  line-height: 38px;
}

.autocompletebox .autocomplete-list a {
  line-height: 38px;
  display: block;
  color: #121212;
  padding: 0 24px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompletebox .autocomplete-list a.img {
}

.autocompletebox .autocomplete-list a.img img {
  float: left;
}

.autocompletebox .autocomplete-list a:hover {
  background: #eff9ff;
}
.group-box {
  width: 60px;
  border: 1px solid #dcdfe6;
  height: 30px;
  line-height: 28px;
  text-align: center;
  background-color: white;
  cursor: pointer;
  color:#8E7D7A;
}
</style>
<template>
  <div class="autocompletebox" v-clickoutside="handleClickOutSide">
    <div @click.stop="openChoose" class="f14 group-box">
      分组
      <i :class="open ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
    </div>
    <!-- <input
      class="in"
      :disabled="autoStatus"
      v-model="keyword"
      @focus="focus"
      @blur="blur"
      @keyup="search"
    />-->
    <input v-model="autoId" type="hidden" />
    <div class="autocomplete-list" v-show="show">
      <!-- <div style="width:250px;height:50px;background:#fff; padding-left:22px;">
        <span style="margin-top:5px" class="font-gray f12">添加分组</span>
        <div class="dis5"></div>
        <el-input style="width:140px" size="mini" v-model="newGroup"></el-input>
        <el-button
          type="success"
          size="mini"
          class="fr"
          style="margin-right: 20px;"
          @click.stop="addGroup"
        >添加</el-button>
      </div> -->
      <div class="dis15"></div>
      <div v-if="req" class="tc f18">
        <div class="dis5"></div>
        <i class="fa el-icon-loading fa-spin"></i>
      </div>
      <div v-else>
        <ul v-if="result.length > 0">
          <li
            v-for="item in result"
            @mouseenter="ifshowbtn = item[fname]"
            @mouseleave="ifshowbtn = ''"
            :key
          >
            <a @click.prevent="addToGroup(item)" :class="fimg != '' ? 'img' : 'txt'">
              <span class="f12 font-gray" style="margin-right: 5px">移动到</span>
              <span v-html="item[fname]" class="f14"></span>
              <span v-if="ename" v-html="'(' + item[ename] + ')'" class="font-gray f14"></span>
              <!-- <span
                style="margin-top:10px;width:16px;height:16px;margin-left: 10px;"
                class="el-icon-delete fr"
                title="删除分组"
                @click.stop="delGroup(item)"
                v-if="ifshowbtn == item[fname] && item[fkey]!=1"
              ></span> -->
              <!-- <div v-if="item[fkey]==1" class="dis5"></div> -->
              <!-- <hr class="font-red" v-if="item[fkey]==1"> -->

              <!-- <span
                style="margin-top:10px;width:16px;height:16px;margin-righ:5px;"
                class="el-icon-right fr"
                title="进入分组"
                @click.stop="select(item[fkey], item[fname], item)"
                v-if="ifshowbtn == item[fname]"
              ></span>-->
              <!-- <div class="dis5"></div> -->
            </a>
          </li>
          <div class="dis20"></div>
        </ul>
        <ul v-else>
          <li class="font-gray2 tc">分组数据获取失败</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import clickoutside from "@lib/clickoutside";
export default {
  name: "autocomplete",
  props: [
    "size",
    "autoId",
    "autoVal",
    "autoStatus",
    "autoApi",
    "autoParm",
    "pParm",
    "fkey",
    "fname",
    "ename",
    "ftype",
    "fimg",
    "grouplist"
  ],
  data() {
    return {
      time: null,
      result: {},
      show: false,
      req: false,
      keyword: "",
      _autoVal: "",
      sources: [],
      newGroup: "",
      groupId: 0,
      ifshowbtn: "",
      open: false
    };
  },
  watch: {
    autoVal: function() {
      this.keyword = this.autoVal;
    }
  },
  mounted: function() {
    this.keyword = this.autoVal;
  },
  directives: {
    clickoutside
  },
  methods: {
    openChoose() {
      this.open = !this.open;
      if (this.open) {
        this.focus();
      } else {
        this.show = false;
      }
    },
    addToGroup(item) {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.$emit("groupid", item.id);
      }, 300);
    },
    init() {
      this.$api.get(this.autoApi, this.autoParm).then(res => {
        if (res.status === 1) {
          this.result = res.data.list || res.data;
        }
      });
    },
    delGroup(item) {
      //删除分组
      this.$confirm("确认删除当前分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .get("flow_img_group.del", { name: item.name, id: item.id })
            .then(res => {
              if (res.status === 1) {
                this.init();
                this.$emit('initGrouplist')//删除分组让分组列表刷新
              }
            });
        })
        .catch(() => {});
      // this.$emit("group", "del");
    },
    addGroup() {
      //新增分组
      this.$api.get("flow_img_group.add", { name: this.newGroup }).then(res => {
        // console.log(res,'res')
        if (res.status === 1) {
          this.init();
          this.newGroup = "";
          this.$emit("group", "add");
        } else {
          this.$error(res.msg);
        }
      });
    },
    // addToGroup() {
    //   //添加进分组
    //   this.$emit("group", "addTo");
    // },

    handleClickOutSide(e) {
      this.open = false
      this.show = false;
    },
    focus: function() {
      this.keyword = "";
      this.search();
    },
    blur: function() {
      this.open = false;
      this.keyword = this._autoVal;
    },
    search: function() {
      let that = this;
      that.show = true;
      that.req = true;
      that.sources.forEach(function(item) {
        if (item !== null && item.source !== null && item.status === 1) {
          item.status = 0;
          item.source.cancel("cancel");
        }
      });
      // that.sources = []
      var sc = {
        source: that.$api.axios.CancelToken.source(),
        status: 1
      };
      that.sources.push(sc);
      that.$api
        .hget(that.autoApi, {
          cancelToken: sc.source.token,
          params: Object.assign(that.autoParm || {}, { keyword: this.keyword })
        })
        .then(res => {
          if (res.status === 1) {
            that.result = res.data.list || res.data;
          }
          sc.source = null;
          that.req = false;
        })
        .catch(function(thrown) {
          sc.source = null;
          if (that.$api.axios.isCancel(thrown)) {
            // console.log('Request canceled', thrown.message)
          }
        });
    }
  }
};
</script>
